<template>
  <div>
    <div class="yanse"><div class="baise">新增计费项目</div></div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      style="display: flex; flex-wrap: wrap"
    >
      <el-form-item label="计费项目名称" prop="name" style="margin-right: 20px">
        <el-input v-model="ruleForm.name" class="shurugeshi"></el-input>
      </el-form-item>

      <el-form-item label="项目优先级" prop="youxianji">
        <el-input v-model="ruleForm.youxianji" class="shurugeshi"></el-input>
      </el-form-item>

      <el-form-item label="项目用量/时长" prop="yongliang">
        <el-input v-model="ruleForm.yongliang" class="shurugeshi"></el-input>
      </el-form-item>

      <el-form-item label="项目价格" prop="jiage">
        <el-input v-model="ruleForm.jiage" class="shurugeshi"></el-input>
      </el-form-item>

      <el-form-item label="通知状态" prop="region" class="tzzhuangtai">
        <el-select
          v-model="ruleForm.region"
          placeholder="请选择状态"
          class="shurugeshi"
        >
          <el-option label="已通知" value="1"></el-option>
          <el-option label="未通知" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="计费目录" prop="region" class="jifeiml">
        <el-select
          v-model="ruleForm.mulu"
          placeholder="请选择状态"
          class="shurugeshi"
        >
          <el-option label="电费目录" value="7"></el-option>
          <el-option label="水费固定月目录" value="8"></el-option>
          <el-option label="水费按量目录" value="9"></el-option>
          <el-option label="天然气目录" value="10"></el-option>
          <el-option label="物业费目录" value="11"></el-option>
          <el-option label="宽带费目录" value="12"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="zixun">通知内容</div>
    <vue-ueditor-wrap v-model="editorContent" :config="myConfig" />

    <div class="fanhui" @click="gohuiqu()">
      <i class="el-icon-refresh-left"></i>返回
    </div>
    <div class="bianji" @click="baocun()">
      <i class="el-icon-document"></i>保存
    </div>

    <div class="tijiao" @click="baocun()">
      <i class="el-icon-s-promotion"></i>提交
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确认保存计费信息？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="tijiao()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";

export default {
  components: { VueUeditorWrap }, // 局部注册组件

  data() {
    return {
        dialogVisible:false,
      ruleForm: {
        yongliang:"",
        youxianji:"",
        mulu:"",
        name: "",
    
        region: "",
        jiage:"",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [{ required: true, message: "请输入计费项目名称", trigger: "blur" }],
        youxianji: [{ required: true, message: "请输入项目优先级", trigger: "blur" }],
        yongliang: [{ required: true, message: "请输入用量/时长", trigger: "blur" }],
        jiage: [{ required: true, message: "请输入价格", trigger: "blur" }],
        tzzhuangtai: [{ required: true, message: "请选择通知状态", trigger: "blur" }],
        jifeiml: [{ required: true, message: "请选择计费目录", trigger: "blur" }],
      },

      editorContent: "",
      myConfig: {
        UEDITOR_HOME_URL: "/UEditor/",
        initialFrameWidth: "90%",
        initialFrameHeight: 300,
        autoHeightEnabled: false,
      },
    };
  },
  methods: {
     baocun(){
       this.dialogVisible = true
     },

    async tijiao(){
      let res = await this.$axios.post("http://community.byesame.com/cost/addCostData",{
        payname:this.ruleForm.name,
        paylevel:this.ruleForm.youxianji,
        paynum:this.ruleForm.yongliang,
        paymoney:this.ruleForm.jiage,
        paystatus:this.ruleForm.region,
        c_id:this.ruleForm.mulu,
        paycontent:this.editorContent,
        token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImVtYWlsIjoiMjQ1MzMxNzM1N0BxcS5jb20iLCJoZWFkIjoiMjAyNTEwMjcxNTE4NDA4MzUxMTQxLmpwZyIsInR5cGUiOiIxIiwiaWF0IjoxNzYxNjEyMTM5LCJleHAiOjE3NjE2OTg1Mzl9.GCKh0ZClDfwlY7U6q-QRKgGI2VSTVrPVqZFOEI7ewi0"
      });
      this.dialogVisible = false
      this.$router.replace("payType");
    },

    
  
    gohuiqu() {
      this.$router.replace("payType");
    },
    
    
  },
};
</script>
<style>
.ziti {
  font-size: 12px;
}
.fanhui {
  width: 80px;
  height: 40px;
  position: fixed;
  right: 20px;
  top: 200px;
  border-radius: 8px;
  background: #409eff;
  color: white;
  text-align: center;
  line-height: 40px;
}
.bianji {
  width: 80px;
  height: 40px;
  position: fixed;
  right: 20px;
  top: 260px;
  border-radius: 8px;
  background: #409eff;
  color: white;
  text-align: center;
  line-height: 40px;
}
.tijiao {
  width: 80px;
  height: 40px;
  position: fixed;
  right: 20px;
  top: 320px;
  border-radius: 8px;
  background: #409eff;
  color: white;
  text-align: center;
  line-height: 40px;
}
.zixun {
  margin-bottom: 20px;
  font-size: 15px;
}
.zhuangtaixz {
  margin-left: 20px;
}
.yanse {
  width: 100%;
  height: 50px;
  text-align: left;
  line-height: 50px;
  color: #409eff;
  background: rgb(240, 240, 240);
  margin-bottom: 20px;
}
.baise {
  width: 100px;
  height: 100%;
  background: white;
}
.shurugeshi {
  width: 650px;
  margin-right: 50px;
}
.vue-ueditor-wrap {
  display: block; 
  width: 90%; 
  margin: 0 auto; 
}
.edui-default .edui-editor {
  margin: 0 auto;
}
.el-form-item__label {
  white-space: nowrap; 
}
</style>